import * as VueRouter from "vue-router";
import * as GLMatrix from "gl-matrix";

export const delay = async () =>
  await new Promise((res) => setTimeout(() => res(null), 1000));

export const getRouterInfo = (rows: VueRouter.RouteRecordRaw[]) =>
  rows.map(($1) => ({
    type: $1.meta?.type,
    title: $1.meta?.title,
    pathName: $1.name,
  }));

export const loadImage = (
  path: Promise<{ default: string }>
): Promise<HTMLImageElement> => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    path
      .then((value) => {
        image.src = value.default;
      })
      .catch(() => reject(null));
    image.onload = () => resolve(image);
  });
};

/*** */
export const getCirclePoint = (
  count: number = 100,
  circle = {
    center: { x: 0, y: 0 },
    radius: 10,
    pointL: 2, // 2, 3 ,4,
    color: [1, 1, 1, 1],
  },
  CWH: { width: number; height: number } = { width: 0, height: 0 }
) => {
  var N = count;
  const { center, radius } = circle;
  var vertexData = [];
  const isOrtho = CWH.width && CWH.height;
  for (var i = 0; i <= N; i++) {
    var theta = (i * 2 * Math.PI) / N;
    var x = radius * Math.sin(theta) + center.x;
    var y = radius * Math.cos(theta) + center.y;
    var z = 0;
    var d = 1.0;
    if (isOrtho) {
      // GLMatrix.mat4.mul
      const _x = (x - CWH.width / 2) / (CWH.width / 2);
      const _y = (y - CWH.height / 2) / (CWH.height / 2);
      const point =
        circle.pointL === 2
          ? [_x, _y]
          : circle.pointL === 3
          ? [_x, _y, z]
          : [_x, _y, z, d];
      vertexData.push(...point, ...circle.color);
    } else {
      const point =
        circle.pointL === 2
          ? [x, y]
          : circle.pointL === 3
          ? [x, y, z]
          : [x, y, z, d];
      vertexData.push(...point, ...circle.color);
    }
  }
  return vertexData;
};
